<template>
    <el-form-item :label="label" :prop="prop" class="item">
        <el-date-picker
            :key="pickerKey"
            style="width: 100%"
            v-model="pickerValue"
            type="date"
            value-format="YYYY-MM-DD"
            :placeholder="'请选择'+ label"
            :disabled-date="disabledDate"
            @change="changePickerValue"
        >
        </el-date-picker>
    </el-form-item>
</template>

<script setup>
const props = defineProps({
    label: {
        type: String,
        default: ''
    },
    prop: {
        type: String,
        default: ''
    },
    value: {
        type: String,
        default: ''
    }
})

const pickerValue = ref('')
const pickerKey = ref('')
const emit = defineEmits(['on-submit'])

watch(()=>props.value, (newval)=>{
    if(newval){
        pickerKey.value += new Date()
        pickerValue.value = newval
    }
},{immediate: true})

const disabledDate = (time) => {
  return time.getTime() > Date.now()
}

const changePickerValue = (data) => {
    if(data){
      emit('on-submit', data)
    } else {
      emit('on-submit', '')
    }
}

</script>
<style lang="scss" scoped>
.item {
  width: 100%;
  .el-form-item__label{
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #6B728A;
}
}
</style>
